<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-09-11 16:45:05
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-12-23 10:35:27
 * @FilePath: \dormitory-screen\src\components\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content-box">
    <!-- 加载层 -->
    <div class="loading-flex-box" v-show="loading">
      <dv-loading>加载中...</dv-loading>
    </div>
    <div style="width: 80%;margin: 0 auto;">
      <!-- <Dialog title="今日有效话单次数">
        <div class="tableBox" v-if="tableData.length > 0">
          <el-table :data="tableData" size="medium" style="width: 100%;" max-height="472"
            :header-cell-style="headerCellstyle" stripe class="elTable">
            <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="学校" width="120" align="center">
              <template v-slot="scope">
                <span>宏联科技学校</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" show-overflow-tooltip label="号码" align="center">
              <template v-slot="scope">
                <span>0769-968899</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" show-overflow-tooltip label="设备ID" align="center">
              <template v-slot="scope">
                <span>968899</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" show-overflow-tooltip label="运营商" width="80" align="center">
              <template v-slot="scope">
                <span>移动</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" show-overflow-tooltip label="厂商" width="80" align="center">
              <template v-slot="scope">
                <span>卡尔</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" show-overflow-tooltip label="通话次数" align="center">
              <template v-slot="scope">
                <span>84</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" show-overflow-tooltip label="通话时长" align="center">
              <template v-slot="scope">
                <span>300:30s</span>
              </template>
            </el-table-column>
            <el-table-column prop="art_title" width="130" show-overflow-tooltip label="位置" align="center">
              <template v-slot="scope">
                <span>宿舍楼1-101</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <el-button size="mini" type="text">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBox">
            <el-pagination background layout="total,prev, pager, next" :total="tableData.length"
              :current-page="personQuery.page" :page-size="10">
            </el-pagination>
          </div>
        </div>
        <div class="noDate" v-if="tableData.length == 0">
          <img :src="require('../assets/img/ikon_no date.png')" alt="">
          <div>暂无数据</div>
        </div>
      </Dialog> -->
      <!-- <Drawer></Drawer> -->
      <!-- 则线图柱状图混合 -->
      <Dialog width="80%" title="全局预览">
        <LineCharts></LineCharts>
      </Dialog>
    </div>
  </div>
</template>
<script>
import Header from './Common/Header.vue'
import Footer from './Common/Footer.vue'
import Title from './Common/Title.vue'
import SearchComp from './Common/SearchComponent.vue'
import RowItem from './Common/RowItem.vue'
import elTableInfiniteScroll from 'el-table-infinite-scroll'; // 全局引用无需此引用
// 柱状图和折线图组合
import LineCharts from './LineCharts.vue'
// 引入防抖函数
import utils from '../util/debounce.js'
export default {
  // 全局引用无需此声明
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  components: {
    Header,
    Footer,
    Title,
    SearchComp,
    RowItem,
    LineCharts
  },
  data() {
    return {
      loading: false,
      loadNum: 0,
      screenBoxHeight: 0,
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      },],
      activeName: '1',
      personQuery: {
        id: '',
        key_word: '',
        status: '',
        school_id: '1',
        gradeid: '',
        classid: '',
        faculty_id: '',
        page: 1,
        page_size: 10
      },
      listLoading: true, // 加载中
      isFirst: true, // 是否第一次加载
      total: 0,
      tableData: [],
      tableData2: [{}, {}, {}, {}, {}, {}, {}, {}],
      class_ids: [],
      classList: [],
      datevalue: [],
    }
  },
  async mounted() {
    var that = this
    await that.getHeight()
    window.addEventListener('resize', () => {
      setTimeout(async () => {
        await that.getHeight()
        // await that.myChart1.resize()
      }, 100)
    })
  },
  beforeDestroy() {
  },
  destroyed() {
    // 使用clearInterval清除定时器
    // clearInterval(this.ruleTime)
  },
  watch: {},
  computed: {},
  methods: {
    // 单元格表头的设置
    headerCellstyle({ row, column, rowIndex, columnIndex }) {
      return 'background:#082667!important;color: #FFFFFF;font-size: 12px;'
    },
    async getHeight() {
      this.screenBoxHeight = document.body.clientHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.clientHeight
    }
  }
}
</script>
<style lang="less" scoped></style>
